<template>
	<view class="content">
		<view class="subject">
			<view class="bg">
				<view class="user end">
					<view class="user-l">
						<view class="mine-info">
							<image class="getUserImg" src="https://youpindou.com:18877/static/lyf.jpg" mode="" />
						</view>
					</view>
					<view class="user-r">
						<view class="name">您好: 张小明</view>
						<text class="user-desc">今天有没有来一发</text>
					</view>
				</view>
			</view>
			<view class="footer-bg">
				<view class="list">
					<view class="serve">
						<view class="m-cell">
							<view class="m-cell-content">
								<view class="m-cell-item" @tap="goServe(index)" v-for="(item, index) in serveList" :key="index">
									<view class="left end">
										<image :src="item.url" mode="" />
										<text>{{ item.title }}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" size="12" color="#bbb"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				serveList: Object.freeze([{
						url: '/static/22.png',
						title: '用户协议'
					},
					{
						url: '/static/23.png',
						title: '检测更新'
					},
					{
						url: '/static/24.png',
						title: '设置'
					},
				]),

			};
		},
		onShow() {

		},
		onLoad() {


		},
		methods: {

			goServe(e) {
				switch (e) {
					case 0:
						this.$goPath(2, "/pages/mine/userManual");
						break;
					case 1:
						this.$toast('暂无更新');
						break;
					case 3:
						this.$goPath(2, "/pages/mine/setting");
						break;
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		.subject {
			position: relative;

			.bg {
				width: 750rpx;
				height: 420rpx;
				background: url("~@/static/bg1.png") no-repeat;
				background-size: 100% 100%;

				.title {
					display: flex;
					justify-content: center; //主轴元素居中
					align-items: center;
					padding-top: 45rpx;
				}

				.user {
					padding: 140rpx 66rpx 40rpx 66rpx;

					.user-l {
						padding-right: 18rpx;

						.mine-info {
							position: relative;
							top: 0;
							left: 0;
							z-index: 5;
							display: flex;
							align-items: center;
							// padding: 30rpx 30rpx 60rpx;
							color: #fff;

							.m-img {
								width: 120rpx;
								height: 120rpx;
								border-radius: 50%;
							}

							.userLogin {
								width: 110rpx;
								height: 110rpx;
								background-color: transparent;
								padding: 0;
								border-radius: 50%;
								border: none;
								position: absolute;
								top: 10rpx;
								left: 10rpx;
							}

							.getUserImg {
								width: 120rpx;
								height: 120rpx;
								background-color: transparent;
								padding: 0;
								border-radius: 50%;
								overflow: hidden;

								.user-img {
									width: 100%;
									height: 100%;
								}
							}
						}

						.img-bor {
							width: 120rpx;
							height: 120rpx;
						}

						.logo {
							width: 108rpx;
							height: 108rpx;
							border-radius: 50%;
						}
					}

					.user-r {
						.name {
							font-size: 40rpx;
							font-weight: bold;
							color: #333333;
						}

						.user-desc {
							font-size: 24rpx;
							font-weight: 400;
							color: #666666;
							padding-top: 22rpx;
						}
					}
				}
			}

			.footer-bg {
				width: 750rpx;
				position: absolute;
				top: 300rpx;

				.monet {
					width: 686rpx;
					margin: 0 auto;
					padding: 39rpx 0 45rpx 50rpx;

					.top {
						.top-l {
							text {
								font-size: 24rpx;
								font-weight: 500;
								color: #FFFFFF;
							}

							image {
								width: 30rpx;
								height: 22rpx;
							}

						}

						.top-r {
							width: 200rpx;
							height: 25rpx;
						}
					}

					.nxt {
						font-size: 55rpx;
						font-weight: bold;
						color: #FFFFFF;
						text-shadow: 0rpx 0rpx 8rpx #4C5EDD;
						padding-top: 16rpx;
					}
				}

				.list {
					width: 686rpx;
					margin: 78rpx auto;

					.top {
						width: 686rpx;
						margin: 0 auto;

						.items {
							padding: 0 30rpx 0 30rpx;
						}

						.item {
							width: 210rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 2rpx 12rpx 1rpx rgba(0, 0, 0, 0.0800);
							border-radius: 10rpx;
							padding: 16rpx 10rpx;


							image {
								width: 60rpx;
								height: 60rpx;
							}

							text {
								font-size: 24rpx;
								font-weight: 400;
								color: #666666;
								padding-left: 11rpx;
							}
						}
					}



					.serve {
						margin-top: 20rpx;
						background: #ffffff;
						border-radius: 20rpx;

						// padding: 40rpx 32rpx 22rpx 28rpx;
						.title {
							padding: 40rpx 0 32rpx 24rpx;
						}

						.m-cell {
							background-color: #fff;

							.m-cell-content {
								.m-cell-item {
									display: flex;
									align-items: center;
									justify-content: space-between;
									font-size: 30rpx;
									padding: 35rpx 14rpx;
									border-bottom: 2rpx solid #f7f7f7;
									color: #0b0b0b;

									.left {
										margin-left: 28rpx;

										image {
											width: 36rpx;
											height: 36rpx;
										}

										text {
											font-size: 28rpx;
											font-weight: 500;
											color: #333333;
											padding-left: 28rpx;
										}
									}

									.icon {
										padding-right: 22rpx;
									}
								}

								.m-cell-item-content {
									padding: 20rpx 14rpx;
									padding-left: 50rpx;
									color: #595959;
								}
							}
						}
					}
				}
			}


		}
	}
</style>